<template>
<!-- <div class="PDCdiv11">
    <img class="PinkSelling" src="../../../assets/PruductDetails/PinkSelling.jpg">
    <div class="PDCdiv1"><span class="price1">￥2894</span></div>
    <div style="color:white;font-size:14px;margin-left:8px">
        <span style="text-decoration: line-through;">￥4599</span>
    <span style="margin-left:10px">6折 | 限量500件</span></div>
    <div style="padding-top:15px;background-color:white;padding-bottom:15px">
        <span class="PDCspan1">hggood自营</span>
        <span style="margin-left:10px">小新AIR14 锐龙版高性能轻薄便携商务设计游戏笔记本电脑</span>
    </div>
    <div class="PDCdiv2">
        <div class="PDCcolor">颜色</div>
        <el-row type="flex" justify="center" style="margin-top:10px">
            <el-col :span="8" class="mycol1"><span class="col1span1" @click="choosecolor(0)" :style="colorstyle[0]">金色</span></el-col>
            <el-col :span="8" class="mycol1"><span class="col1span1" @click="choosecolor(1)" :style="colorstyle[1]">银色</span></el-col>
            <el-col :span="8" class="mycol1"><span class="col1span1" @click="choosecolor(2)" :style="colorstyle[2]">黑色</span></el-col>
        </el-row>
        <div class="PDCcolor" style="margin-top:20px">规格</div>
        <el-row type="flex" justify="center" style="margin-top:10px">
            <el-col :span="8" class="mycol1"><span class="col1span1" @click="choosestyle" :style="stylestyle">IdeaPad310</span></el-col>
            <el-col :span="16"></el-col>
        </el-row>
        <div class="PDCcolor" style="margin-top:30px">数量
             <el-input-number v-model="num" @change="handleChange" :min="1" :max="3" size="mini"
             style="width:90px;float:right;margin-right:20px;margin-top:0px"></el-input-number>
        </div>
    </div>
</div> -->
<div class="PDCdiv11">
    <img class="PinkSelling" src="../../../assets/PruductDetails/PinkSelling.jpg">
    <div class="PDCdiv1"><span class="price1">￥{{realsellresult}}</span></div>
    <div style="color:white;font-size:14px;margin-left:8px">
        <span style="text-decoration: line-through;">￥{{axiosData.price}}</span>
    <span style="margin-left:10px">6折 | 限量500件</span></div>
    <div style="padding-top:15px;background-color:white;padding-bottom:15px">
        <span class="PDCspan1">hggood自营</span>
        <span style="margin-left:10px">{{axiosData.title}}</span>
    </div>
    <div class="PDCdiv2">
        <div class="PDCcolor">颜色</div>
        <el-row type="flex" justify="center" style="margin-top:10px">
            <el-col :span="8" class="mycol1"><span class="col1span1" @click="choosecolor(0)" :style="colorstyle[0]">金色</span></el-col>
            <el-col :span="8" class="mycol1"><span class="col1span1" @click="choosecolor(1)" :style="colorstyle[1]">银色</span></el-col>
            <el-col :span="8" class="mycol1"><span class="col1span1" @click="choosecolor(2)" :style="colorstyle[2]">黑色</span></el-col>
        </el-row>
        <div class="PDCcolor" style="margin-top:20px">规格</div>
        <el-row type="flex" justify="center" style="margin-top:10px">
            <el-col :span="16" class="mycol1"><span class="col1span1" @click="choosestyle" :style="stylestyle">{{axiosData.itemType}}</span></el-col>
            <el-col :span="8"></el-col>
        </el-row>
        <div class="PDCcolor" style="margin-top:30px">数量
             <el-input-number v-model="mynumber" @change="handleChange" :min="1" :max="3" size="mini"
             style="width:90px;float:right;margin-right:20px;margin-top:0px;z-index: 0;"></el-input-number>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name:'PxPDCenter',
    data(){
        return{
            colorstyle:[],
            stylestyle:'',
            changestyle:0,
            changechoosecolor:'border: 1px solid rgb(216, 29, 70);color: rgb(216, 29, 70);',
            mynumber: 1,
            axiosData:{'price':99999},
            ChooseColor:0,
            ChooseStyle:0,
        }
    },
    methods:{
        choosecolor(index){
            this.ChooseColor=1
            this.$bus.$emit('IfChoose',this.ChooseColor,this.ChooseStyle)
            this.colorstyle=[]
            this.colorstyle[index]=this.changechoosecolor
        },
        choosestyle(){
            this.ChooseStyle=1
            this.$bus.$emit('IfChoose',this.ChooseColor,this.ChooseStyle)
            this.changestyle=!this.changestyle
            if(this.changestyle){
                this.stylestyle=this.changechoosecolor
            }else{
                this.stylestyle=''
            }
        },
        handleChange(value) {
            console.log(value);
        }
    },
    computed:{
        realsellresult(){
            return Math.round(this.axiosData.price*0.6)
        }
    },
    watch:{
        mynumber(val){
            console.log(val,'%%%%val');
            this.$bus.$emit('Num',val)
        }
    },
    mounted(){
        document.body.scrollTop=0
        this.$bus.$on('LefttoRight',(axiosData)=>{
            this.axiosData=axiosData
        })
    },
    beforeDestroy(){
        this.$bus.$off('LefttoRight')
    }
}
</script>

<style scoped>
.PDCdiv11{
    background-color: rgb(243, 243, 243);
}
.PinkSelling{
    height: 100%;
    width: 100%;
}
.PDCdiv1{
    margin-left: 10px;
    color: white;
    font-size: 25px;
    margin-top: -62px;
}
.PDCspan1{
    border-radius: 2px;
    color: white;
    font-size: 12px;
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: rgb(245, 63, 94);
}
.PDCcolor{
    margin-left: 15px;
    font-weight: 650;
}
.PDCdiv2{
    margin-top: 15px;
    padding-top: 5px;
    background-color: white;
    box-shadow: -2px -2px 3px 1px rgb(236, 236, 236);
}
.mycol1{
    text-align: center;
}
.col1span1{
    font-size: 12px;
    padding: 5px;
    padding-right: 42px;
    padding-left: 42px;
    border-radius: 3px;
    border: 1px solid rgb(204, 204, 204);
}
</style>